<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>发现</title>
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/jquery-weui.css">
    <link rel="stylesheet" href="css/demos.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="./js/swiper.min.css"/>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZSXGYc4z7RLVClUmrlL1w9cH9DRghNuw"></script>
</head>
<style>
    .topNav {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
    }

    .swiper_top {
        position: fixed;
        top: 0px;
        left: 0;
        width: 100%;
        background: #fff;
        height: 30px;
        padding: 5px 10px;
    }

    .swiper-slide {
        color: #444;
        text-align: center;
        flex-grow: 0;
        width: auto;
        padding: 0 .5em;
        margin: 0 5px;
    }

    .swiper-slide-active {
        color: #333;
        font-weight: 700;
        font-size: 16px;
    }

    .swiper-slide-active::after {
        content: "";
        position: absolute;
        bottom: 0px;
        width: 50%;
        left: 50%;
        transform: translateX(-50%);
        height: 3px;
        border-radius: 1.5px;
        background: #6670ff;
    }

    .outer {
        padding: 0 15px;
        margin-top: 50px;
    }

    /* .discover_content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    } */

    .discover_content a {
        display: block;
        margin-top: 10px;
        background: #fff;
        border-radius: 5px;
        font-size: 0;
        padding-bottom: 10px;
    }

    .discover_content .card {
        display: flex;
        position: relative;
    }

    .discover_content .card img {
        width: 130px;
        height: 100px;
        flex-shrink: 0;
    }

    .discover_content {
        padding: 10px;
        background: #fff;
        border-radius: 5px;
        margin-top: 10px;
    }

    .goods_title {
        font-size: 16px;
        color: #666;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        word-break: break-all;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        -moz-line-clamp: 1;
        -moz-box-orient: vertical;
        -o-line-clamp: 1;
        -o-box-orient: vertical;
        -ms-line-clamp: 1;
        -ms-box-orient: vertical;
    }

    .good_address {
        font-size: 12px;
        color: #666;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        word-break: break-all;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        -moz-line-clamp: 2;
        -moz-box-orient: vertical;
        -o-line-clamp: 2;
        -o-box-orient: vertical;
        -ms-line-clamp: 2;
        -ms-box-orient: vertical;
    }

    .good_address i {
        font-size: 20px;
    }

    .inner_title {
        font-size: 12px;
        color: #666;
        padding: 0 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .shop_name {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        word-break: break-all;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        -moz-line-clamp: 1;
        -moz-box-orient: vertical;
        -o-line-clamp: 1;
        -o-box-orient: vertical;
        -ms-line-clamp: 1;
        -ms-box-orient: vertical;
        color: #0F78FB;
    }

    .price {
        position: absolute;
        line-height: 20px;
        padding: 0 5px;
        border-radius: 3px;
        background: rgba(0, 0, 0, .3);
        font-size: 12px;
        color: #fff;
        bottom: 5px;
        left: 15px;
    }

</style>

<body ontouchstart>
<div class="topNav">
    <!-- <a href="./me.html"><i class="iconfont icon-zuo"></i></a> -->
    <div style="text-align: center;width: 100%;">发现</div>
</div>
<div class="swiper-container swiper_top">
    <div class="swiper-wrapper" id="shopTypeList">
        <div class="swiper-slide swiper-slide-active" onclick="queryHotShopList()">推荐</div>
        <!--   <div class="swiper-slide">旅行</div>
           <div class="swiper-slide">丽人</div>
           <div class="swiper-slide">电影</div>
           <div class="swiper-slide">结婚</div>
           <div class="swiper-slide">购物</div>
           <div class="swiper-slide">教培</div>
           <div class="swiper-slide">家装</div>
           <div class="swiper-slide">亲子</div>-->
    </div>
</div>
<div class="outer" id="shopList">
    <!-- <div class="discover_content">
         <a href="store.html">
             <div class="card">
                 <img src="./images/1585641068(1).jpg" alt="">
                 <div class="inner_title">
                     <p class="goods_title">商家名称</p>
                     <p class="good_address"><i class="iconfont icon-julilujing"></i>湖北省襄樊市高新区高铁站一桥旁边的小卖部</p>
                     <p class="shop_name">每消费一元可以获得1积分</p>
                     <p class="price">7.5km</p>
                 </div>
             </div>
         </a>
     </div>-->

</div>


<div class="kong3"></div>
<div class="weui-tabbar">
    <!--<a href="index.html" class="weui-tabbar__item">
        <div class="weui-tabbar__icon">
            <img src="images/shouye.png" alt="">
        </div>
        <p class="weui-tabbar__label">首页</p>
    </a>
    <a href="discover.html" class="weui-tabbar__item weui-bar__item&#45;&#45;on">
        <div class="weui-tabbar__icon">
            <img src="images/faxianguanli1.png" alt="">
        </div>
        <p class="weui-tabbar__label">发现</p>
    </a>
    <a href="cellect.html" class="weui-tabbar__item">
        <div class="weui-tabbar__icon">
            <img src="images/order.png" alt="">
        </div>
        <p class="weui-tabbar__label">收藏</p>
    </a>
    <a href="me.html" class="weui-tabbar__item">
        <div class="weui-tabbar__icon">
            <img src="images/me.png" alt="">
        </div>
        <p class="weui-tabbar__label">我的</p>
    </a>-->
    <!-- <a class="fb" href="sc-fb.html"></a> -->
</div>
</body>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-weui.js"></script>
<script src="js/swipe.js"></script>
<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="wxJs/utils/contain.js"></script>
<script src="wxJs/utils/storage.js"></script>
<script>
    var userId = GetQueryString("userId")
    if (!userId) {
        window.history.back(-1);
    }else {
        getMenu()
    }
    var currentLat
    var currentLng
    $(function () {
        /*获取用户当前地址*/
        var map = new BMap.Map("allmap");
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                currentLat = r.point.lat;   //纬度
                currentLng = r.point.lng;  //经度
                selectShopTypeList();
                queryHotShopList();
            } else {
                alert('failed' + this.getStatus());
            }
        }, {enableHighAccuracy: true});
    })

    /*查询商铺的类型*/
    function selectShopTypeList() {
        $.get(getWeiContextPath() + "/wx/data/selectShopTypeList", function (res) {
            var _shopTypeList = $("#shopTypeList")
            $.each(res, function (i, obj) {
                _shopTypeList.append(' <div class="swiper-slide" onclick="queryHotShopList(' + obj.id + ')">' + obj.typeName + '</div>')
            })
            var mySwiper = new Swiper('.swiper-container', {
                slidesPerView: "auto"
            })
            listEach(".swiper-slide", "swiper-slide-active")
        })
    }

    function listEach(list, active) {
        $(list).click(function () {
            var index = $(list).index(this)
            for (var i = 0; i < $(list).length; i++) {
                $(list).eq(i).removeClass(active)
                $(list).eq(index).addClass(active)
            }
        })
    }

    function queryHotShopList(shopTypeId) {
        if (!shopTypeId) {
            shopTypeId = "";
        }
        $.post(getWeiContextPath() + "/wx/shop/queryHotShopList", {
            shopTypeId: shopTypeId,
            currentLat: currentLat,
            currentLng: currentLng
        }, function (res) {
           var  returnRatio =res.returnRatio
            var _shopList = $('#shopList').empty();
            $.each(res.list, function (i, obj) {
                var rjf = 1 * obj.discountRatio * returnRatio * 10;
                _shopList.append('<div class="discover_content">\n' +
                    '        <a href="store.html?shopId=' + obj.shopId + '&userId='+userId+'">\n' +
                    '            <div class="card">\n' +
                    '                <img src="' + getImgSrc(obj.imgUrls) + '" alt="">\n' +
                    '                <div class="inner_title">\n' +
                    '                    <p class="goods_title">' + obj.shopName + '</p>\n' +
                    '                    <p class="good_address"><i class="iconfont icon-julilujing"></i>' + obj.shopAdress + '</p>\n' +
                    '                    <p class="shop_name">每消费1元获得' + rjf.toFixed(2) + '积分</p>\n' +
                    '                    <p class="price">' + (obj.distancenum / 1000) + 'km</p>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '        </a>\n' +
                    '    </div>')
            })
        })
    }

    function getMenu() {
        $('.weui-tabbar').html('<a href="index.html?userId=' + userId + '" class="weui-tabbar__item">\n' +
            '        <div class="weui-tabbar__icon">\n' +
            '            <img src="images/shouye.png" alt="">\n' +
            '        </div>\n' +
            '        <p class="weui-tabbar__label">首页</p>\n' +
            '    </a>\n' +
            '    <a href="javascript:void (0)" class="weui-tabbar__item weui-bar__item--on">\n' +
            '        <div class="weui-tabbar__icon">\n' +
            '            <img src="images/faxianguanli1.png" alt="">\n' +
            '        </div>\n' +
            '        <p class="weui-tabbar__label">发现</p>\n' +
            '    </a>\n' +
            '    <a href="cellect.html?userId=' + userId + '" class="weui-tabbar__item">\n' +
            '        <div class="weui-tabbar__icon">\n' +
            '            <img src="images/order.png" alt="">\n' +
            '        </div>\n' +
            '        <p class="weui-tabbar__label">收藏</p>\n' +
            '    </a>\n' +
            '    <a href="me.html?userId=' + userId + '" class="weui-tabbar__item">\n' +
            '        <div class="weui-tabbar__icon">\n' +
            '            <img src="images/me.png" alt="">\n' +
            '        </div>\n' +
            '        <p class="weui-tabbar__label">我的</p>\n' +
            '    </a>')
    }


</script>

</html>